<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport"/>
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>抽奖</title>
    <style>
    * {
        margin: 0;
        padding: 0;
    }
    
    body {
        font-family: "微软雅黑",Arial,sans-serif;
    }
    .prize {
        width: 325px;
        height: 325px;
        margin: 50px auto 0 auto;
        position: relative;
        background: lightgoldenrodyellow;
    }
    
    .prize i {
        display: block;
        width: 80px;
        height: 80px;
        border: 1px solid #fff;
        font-size: 12px;
        position: absolute;
        text-align: center;
        line-height: 80px;
        background: lightsalmon;
        font-style: normal;
        color: #fff;
    }
    
    .btn {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 80px;
        height: 80px;
        border-radius: 50%;
        border: none;
        margin-left: -40px;
        margin-top: -40px;
        background: lightsalmon;
        outline: none;
        font-family: "微软雅黑",Arial,sans-serif;
        font-weight: bold;
        font-size: 18px;
        color: #fff;
        cursor: pointer;
    }
    
    .prize i.active {
        background: lightcoral;
        color: #fff;
    }
    
    .prize i:nth-child(1) {
        left: 0;
    }
    
    .prize i:nth-child(2) {
        left: 81px;
    }
    
    .prize i:nth-child(3) {
        left: 162px;
    }
    
    .prize i:nth-child(4) {
        left: 243px;
    }
    
    .prize i:nth-child(5) {
        right: 0;
        top: 81px;
    }
    
    .prize i:nth-child(6) {
        right: 0;
        top: 162px;
    }
    
    .prize i:nth-child(7) {
        right: 0;
        top: 243px;
    }
    
    .prize i:nth-child(8) {
        left: 162px;
        bottom: 0;
    }
    
    .prize i:nth-child(9) {
        left: 81px;
        bottom: 0;
    }
    
    .prize i:nth-child(10) {
        left: 0;
        bottom: 0;
    }
    
    .prize i:nth-child(11) {
        left: 0;
        top: 162px;
    }
    
    .prize i:nth-child(12) {
        left: 0;
        top: 81px;
    }
    </style>
</head>
<body>
<div class="prize" id="prize">
    <i>100元现金</i>
    <i>谢谢参与</i>
    <i>50积分</i>
    <i>谢谢参与</i>
    <i>10元优惠券</i>
    <i>谢谢参与</i>
    <i>10元现金</i>
    <i>谢谢参与</i>
    <i>天猫精灵</i>
    <i>谢谢参与</i>
    <i>30元优惠券</i>
    <i>谢谢参与</i>
    <button class="btn" id="btn">抽奖</button>
</div>
<script>
  //申明变量
var btn = document.getElementById("btn"),
    prize = document.getElementsByTagName("i"),
    needNum,
    result;
 
 
//封装生成随机数函数
function getRandom(n, m) {
    return Math.floor(Math.random() * (m - n + 1) + n);
}
 
 
//点击按概率生成随机数
btn.onclick = function () {
 
    //开始抽奖后限制按钮功能及按钮样式变化
    btn.setAttribute("disabled","disabled");
    btn.style.backgroundColor = "#FFC8AD";
    btn.innerHTML="抽奖中";
 
 
    //生成1-100的随机整数，用于分配概率
    // var rand = getRandom(1, 100);
    // console.log(rand);
 
    //分配概率，需保证所有奖品的概率总和为100%
    // var rang = 0,  //此数值必须为0，不能变
    //     rang1 = rang ,  //rang1对应下面第一个if，依次类推，修改后面的数值设置概率，如概率13%，则设置数值13
    //     rang2 = rang1 + 1,
    //     rang3 = rang2 + 89,  //代表50积分中奖概率为89%
    //     rang4 = rang3 +1,
    //     rang5 = rang4 +1,
    //     rang6 = rang5 + 1,
    //     rang7 = rang6 + 1,
    //     rang8 = rang7 + 1,
    //     rang9 = rang8 + 1,
    //     rang10 = rang9 + 1,
    //     rang11 = rang10 + 1,
    //     rang12 = rang11 + 2;
    // 根据后台传的参数来判断
    var rand = 1;
    if (rand = 1) {
        needNum = 1;
        result = "100元现金";
    } else if (rand = 2) {
        needNum = 2;
        result = "谢谢参与";
    } else if (rand = 3) {
        needNum = 3;
        result = "50积分";
    } else if (rand = 4) {
        needNum = 4;
        result = "谢谢参与";
    } else if (rand = 5) {
        needNum = 5;
        result = "10元优惠券";
    } else if (rand = 6) {
        needNum = 6;
        result = "谢谢参与";
    } else if (rand = 7) {
        needNum = 7;
        result = "10元现金";
    } else if (rand = 8) {
        needNum = 8;
        result = "谢谢参与";
    } else if (rand = 9) {
        needNum = 9;
        result = "天猫精灵";
    } else if (rand = 10) {
        needNum = 10;
        result = "谢谢参与";
    } else if (rand = 11) {
        needNum = 11;
        result = "30元优惠券";
    } else if (rand = 12) {
        needNum = 12;
        result = "谢谢参与";
    }
    // if (rand > rang && rand <= rang1) {
    //     needNum = 1;
    //     result = "100元现金";
    // } else if (rand > rang1 && rand <= rang2) {
    //     needNum = 2;
    //     result = "谢谢参与";
    // } else if (rand > rang2 && rand <= rang3) {
    //     needNum = 3;
    //     result = "50积分";
    // } else if (rand > rang3 && rand <= rang4) {
    //     needNum = 4;
    //     result = "谢谢参与";
    // } else if (rand > rang4 && rand <= rang5) {
    //     needNum = 5;
    //     result = "10元优惠券";
    // } else if (rand > rang5 && rand <= rang6) {
    //     needNum = 6;
    //     result = "谢谢参与";
    // } else if (rand > rang6 && rand <= rang7) {
    //     needNum = 7;
    //     result = "10元现金";
    // } else if (rand > rang7 && rand <= rang8) {
    //     needNum = 8;
    //     result = "谢谢参与";
    // } else if (rand > rang8 && rand <= rang9) {
    //     needNum = 9;
    //     result = "天猫精灵";
    // } else if (rand > rang9 && rand <= rang10) {
    //     needNum = 10;
    //     result = "谢谢参与";
    // } else if (rand > rang10 && rand <= rang11) {
    //     needNum = 11;
    //     result = "30元优惠券";
    // } else if (rand > rang11 && rand <= rang12) {
    //     needNum = 12;
    //     result = "谢谢参与";
    // }
 
 
    //执行滚动
    var index = 0,  //当前奖品位置下标，起始值为0，不要修改
        roundNum = 1,   //滚动次数，起始值为1，不要修改
        round =  prize.length * 4,  //数值代表滚动圈数
        end = round + needNum;  //随机获得的结束序号
    scrollStart();
 
    //封装高亮函数
    function active(){
        for (var j = 0; j < prize.length; j++) {  //遍历所有奖品，清除高亮
            prize[j].removeAttribute("class");
        }
        prize[index].className = "active";   //给当前奖品加上高亮
    }
 
 
    //封装开始滚动函数
    function scrollStart() {
        var timer1 = setInterval(function () {
            if (roundNum == end-4) {   //滚动到倒数第四个时停止timer1，执行结束滚动函数
                clearInterval(timer1);
                scrollEnd();
                // console.log("index:"+index+"roundNum:"+roundNum+"end:"+end)
            }
            active();
            roundNum++;
            index++;
            if (index > 11) index = 0;
        }, 65)  //此数值代表滚动速度，越小越快
    }
 
 
    //封装结束滚动函数
    function scrollEnd() {
        var timer2 = setInterval(function () {
            if (roundNum == end) {  //当滚动的次数跟随机获得的结束序号一致时，停止timer2
                clearInterval(timer2);
                setTimeout(function () {  //延时弹出弹框
                    var isThank = result.indexOf("谢");  //查找结果里是否包含字符“谢”
                    if ( isThank == -1) {  //没有包含返回结果-1，则说明已中奖，返回中奖结果
                        alert("恭喜你获得："+result);
                    }else {
                        alert("你没抽中奖品，再接再厉！")
                    }
                    //恢复按钮功能及样式
                    btn.removeAttribute("disabled");
                    btn.style.backgroundColor = "lightsalmon";
                    btn.innerHTML = "抽奖";
                },400)  //此数值代表弹出延时多少毫秒弹出
            }
            active();
            roundNum++;
            index++;
            if (index > 11) index = 0;
        },220)  //次数值代表最后几个滚动的速度，约小越快
    }
 
 
};
</script>
</body>
</html>